<template>
  <div class="row flex-center" style="gap: 20px; padding: 40px 20px">
      <div class="btn" @click="start">开始连接</div>
      <div class="btn" @click="close">断开连接</div>
      <div class="btn" @click="conf.message = []">清空消息列表</div>
      <div class="btn">当前状态：{{ ws.status === 1 ? '已连接' : '未连接' }}</div>
  </div>
  <div class="row justify-center" style="margin-bottom: 40px">
      <div class="row" style="width: 900px; gap: 40px">
          <div>
              连接地址：
              <input v-model="conf.url" style="width: 250px" />
          </div>
          <div>
              发送信息：
              <input v-model="conf.send" style="width: 250px" />
              <el-button style="margin-left: 10px" @click="sendMessage">发送</el-button>
          </div>
      </div>
  </div>
  <div class="row justify-center">
      <div class="box">
          <div v-for="item in conf.message">
              {{ item.time }}：{{ conf.messagetype[item.type] }} => {{ item.data }}
          </div>
      </div>
  </div>
</template>

<script lang="ts" setup>
import WebSocketBean from '@/util/websocket/WebSocketBean'
import { IWebSocketBeanParam } from '@/util/websocket/websocket'
import { reactive } from 'vue'
//import System from '~/utils/System'

enum MessageType {
  /**
   * 收到发来的消息
   */
  Get,
  /**
   * 发送到服务器的消息
   */
  Send,
  /**
   * 通知
   */
  Message
}

const conf = reactive({
  status: '未连接',
  messagetype: {
      [MessageType.Get]: '收到',
      [MessageType.Send]: '发送',
      [MessageType.Message]: '通知'
  } as any,
  message: [] as {
      time: any
      type: MessageType
      data: any
  }[],
  url: 'ws://127.0.0.1:5555',
  send: ''
})

const addMessage = (type: MessageType, ctx: any) => {
  conf.message.push({
      time: new Date().toJSON(),
      type: type,
      data: ctx
  })
}

const sendSuffix = ''

/**
* 获取连接参数，也可以直接写入，这里是因为对地址进行了配置，所以每次连接都更新一次地址
*/
const getParam = () => {
  return {
      url: conf.url,
      needReconnect: true,
      reconnectGapTime: 3000,
      sendSuffix,
      messageSuffix: sendSuffix,
      heartSend: '~',
      heartGet: '~',
      heartGapTime: 3000,
      onopen: () => {
          addMessage(MessageType.Message, '连接成功')
      },
      onmessage: (data: any) => {
          console.log(data.data)
          const sp = data.data.split(sendSuffix).filter((el: string) => el.length > 0)
          console.log(sp)
          sp.forEach((ctx: any) => {
              addMessage(MessageType.Get, ctx)
          })
      },
      onerror: () => {
          addMessage(MessageType.Message, '连接失败:' + conf.url)
      }
  } as IWebSocketBeanParam
}

/**
* websocket示例，主要维护和使用对象
*/
const ws = new WebSocketBean(getParam())
const start = () => {
  // ws.start()
  ws.start(getParam())
}
const close = () => {
  ws.dispose()
  addMessage(MessageType.Message, '关闭连接成功')
}

const sendMessage = () => {
  if (ws.status === 1) {
      const sendStatus = ws.send(conf.send)
      if (sendStatus) {
          addMessage(MessageType.Send, conf.send)
          console.log("发送成功")
          //System.sr('发送成功')
      }
  } else {
    console.log("未连接")
    //System.er('未连接')
  }
}
</script>
<style lang="scss" scoped>
.btn {
  width: 140px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff00080;
  cursor: pointer;
  &:hover {
      border: 1px solid #3ce984;
  }
}

.box {
  width: 900px;
  height: 400px;
  border: 1px solid #000;
  overflow: hidden auto;
  padding: 15px;
}
</style>
